<template>
  <div id="wei"></div>
</template>

<script>
import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(()=>{
        chart()
    })

      let chart = () => {
      let myChart = echarts.init(document.getElementById("wei"));
      
      let data=JSON.parse(localStorage.getItem('billData')) 
      let x=[],weiData=[]
      for(let item of data){
          x.push(item.month)
          weiData.push(item.wei)
      }
      var option = {
        //------------标题样式---------------
        title: {
          text: "微信消费统计",
          show: "true",
          left: "30%",
          top: "0px",
          textStyle: {
            color: "#fff",
            align: "center",
            baseline: "top",
            fontFamily: "楷体",
            fontSize: 20,
          },
        },
        //--------------绘图区-------------
        grid: {
          left: "40px",
          top: "30px",
          right: "40px",
          bottom: "50px",
          width: "auto",
          height: "auto",
        },
        //------------浮框区---------------
        tooltip: {
          show: "true",
          trigger: "axis",
          borderColor: "#666",
          backgroundColor: "#666",
          textStyle: {
            color: "#fff",
            align: "left",
            baseline: "top",
            fontSize: "14",
          },
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "#a5bef0",
            },
          },
        },
        //--------背景-------
        backgroundColor: "rgba(36,52,136,0.5)",
        //--------图例---------
        legend: {
          show: "false",
          type: "scroll",
          left: "center",
          right: "auto",
          bottom: "2px",
          itemWidth: 20,
          itemHeight: 10,
          zlevel: 10,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          data: [],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        //-------X轴----------------
        xAxis: {
          show: true,
          type: "category",
          boundaryGap: true,
          name: "月份",
          nameGap: 15,
          nameStyle: {
            color: "#fff",
            fontSize: 12,
          },
          nameLocation: "end",
          //数值样式
          axisLabel: {
            //   formatter:function(val){return xxx} //手动设置x轴下标
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          //  min:function(){return 0}, //x轴最小值
          //  max:function(){return 200}, //最大值
          data: x,
        },
        //---------y轴 同x轴--------------
        yAxis: {
          type: "value",
          splitNumber: 5,
          splitLine: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        dataZoom: [
          {
            //x轴显示区域
            type: "slider",
            show: false,
            showDetail: true,
            realtime: true,
            start: 0,
            end: 100,
            top: "bottom",
          },
        ],

        series: [
          {
            name: "支付宝消费",
            type: "bar",
            // stack:'总量',
            data: weiData,
            index: 0,
          },
        ],
      };
      myChart.setOption(option)
      window.addEventListener('resize',()=>myChart.resize())
    };
    
  },
};
</script>

<style>
#wei{
    width:32%;
    height: 250px;
}
</style>